<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分类管理</title>
    <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/css/my-code.css">
    <link href="../assets/css/common-style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/css/vendorManagement.css">
    <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../assets/js/bui-min.js"></script>
    <script type="text/javascript" src="../assets/js/config-min.js"></script>
    <script type="text/javascript" src="../assets/js/my.js"></script>
</head>
<body>
<div class="container">
    <div class="search-mes">
        <form action="" id="my-form">
            <lable>
                物料名称
                <input type="text">
            </lable>
            <button class="button-search">查询</button>
        </form>
        <div class="search-result">
            <div>共<span>5</span>个搜索结果</div>
            <p class="other_btn">
                <button id="btnAdd" class="button button-primary">添加</button>
                <button id="btnDel" class="button button-danger">删除</button>
            </p>
            <div class="row">
                <div class="" style="width:100%">
                    <div id="grid">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="" style="width:100%">
                    <div id="bar">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="content" class="hide">
        <form class="form-horizontal">
            <div class="row">
                <div class="control-group span15">
                    <label class="control-label"><s>*</s>名称：</label>
                    <div class="controls">
                        <input name="a" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span15">
                    <label class="control-label"><s>*</s>编码：</label>
                    <div class="controls">
                        <input name="b" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span15 ">
                    <label class="control-label"><s>*</s>是否检修：</label>
                    <div class="controls">
                        <input name="c" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span15">
                    <label class="control-label"><s>*</s>图例：</label>
                    <div class="controls">
                        <input name="d" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span15">
                    <label class="control-label"><s>*</s>排列顺序：</label>
                    <div id="range" class="controls">
                        <input name="e" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="add_vendor" class="hide">
        <form class="form-horizontal">
            <div class="row">
                <div class="control-group span15">
                    <label class="control-label"><s>*</s>名称：</label>
                    <div class="controls">
                        <input name="a" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span15">
                    <label class="control-label"><s>*</s>编码：</label>
                    <div class="controls">
                        <input name="b" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span15 ">
                    <label class="control-label"><s>*</s>是否检修：</label>
                    <div class="controls">
                        <input name="c" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span15">
                    <label class="control-label"><s>*</s>图例：</label>
                    <div class="controls">
                        <input name="d" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span15">
                    <label class="control-label"><s>*</s>排列顺序：</label>
                    <div id="range" class="controls">
                        <input name="e" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
<script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
    BUI.use(['bui/grid','bui/toolbar','bui/data','bui/editor','bui/list'],function(Grid,Toolbar,Data,Editor,List){
        var NumerPBar = Toolbar.NumberPagingBar;
        var Store = Data.Store,
            columns = [{
                title : '名称',
                dataIndex :'a',
                width:100
            },{
                title : '编码',
                dataIndex :'b',
                width:150
            },{
                title : '是否检修',
                dataIndex : 'c',
                width:100
            },{
                title : '图例',
                dataIndex : 'd',
                width:100
            },{
                title : '排列顺序',
                dataIndex : 'e',
                width:100
            },{
                title: '操作',
                renderer : function(){
                    return '<span class="grid-command btn-edit">编辑</span>'
                }
            }];
        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId : 'content', //设置隐藏的Dialog内容
                triggerCls : 'btn-edit', //触发显示Dialog的样式
                editor : {
                    title : '物料类型编辑',
                    width : 430,
                    listeners : {
                        show : function(){
                            var form = this.get('form');
                            if(!isAddRemote){
                                var bField = form.getField('b');
                                bField.set('remote',{
                                    url : '../data/classifyData.json',
                                    dataType:'json',//默认为字符串
                                    callback : function(data){
                                        if(data.success){
                                            return '';
                                        }else{
                                            return data.msg;
                                        }
                                    }
                                });
                                isAddRemote = true;
                            }
                            //TO DO
                        }
                    }
                }
            }),
            store = new Store({
                url : '../data/classifyData.json',
                autoLoad:true, //自动加载数据
                params : { //配置初始请求的参数
                    a : 'a',
                    b : 'b',
                    c : 'c',
                    d : 'd',
                    e : 'e'
                },
                pageSize:8	// 配置分页数目
            });
        bar = new NumerPBar({
            render : '#bar',
            autoRender: true,
            elCls : 'pagination',
            store : store,
            prevText:'上一页',
            nextText:'上一页'
        });
        grid = new Grid.Grid({
            render:'#grid',
            columns : columns,
            forceFit : true,
            plugins: [BUI.Grid.Plugins.CheckSelection, BUI.Grid.Plugins.ColumnChecked, BUI.Grid.Plugins.AutoFit, BUI.Grid.Plugins.ColumnResize,Grid.Plugins.RowNumber,editing], // 插件形式引入多选表格
            store : store
        });
        function validFn (value,obj) {
            var records = store.getResult(),
                rst = '';
            BUI.each(records,function (record) {
                if(record.a == value && obj != record){
                    rst = '文本不能重复';
                    return false;
                }
            });
            return rst;
        }
        grid.render();
//        list = new List.SimpleList({ //创建列表
//            elCls:'bui-select-list',//默认是'bui-simple-list'
//            width:'100%',
//            render : '#grid',
//            items : items,
//            itemTpl : '<li>{text}:{value}<span class="pull-right"><i class="icon icon-edit"></i> <i class="icon icon-remove-sign"></i></span></li>'
//        });
//        list.render();
        var editor = new Editor.DialogEditor({
            contentId:'add_vendor',
            width : 500,
            mask : true,
            title : '新建厂商',
            success : function(){
                this.accept();
            }
        });

        editor.render();
        //添加新纪录
        $('#btnAdd').on('click',function(){
            editor.show();
//            var obj = {'text' : '新建记录',value : ''};
//            list.addItem(obj);
//            list.setSelected(obj);
//            editItem(obj);
        });
        //删除选中的记录
        function delFunction(){
            var selections = grid.getSelection();
            store.remove(selections);
        }
        $("#btnDel").click(function(){
            delFunction();
        });
    });
</script>
</html>